import * as React from 'react';
import { Form, Input, Button } from 'antd';

const FormItem = Form.Item;

interface SearchFormProps {
  handleSearch: (filters: Record<string, any>, isSearch: boolean) => void;
  showModal: () => void;
  form: any;
}

class SearchForm extends React.PureComponent<SearchFormProps> {
  handleFormReset = () => {
    this.props.form.resetFields();
  };

  handleFormSearch = (e: any) => {
    e.preventDefault();

    const { form } = this.props;

    form.validateFields((err: any, values: any) => {
      if (err) return;

      let filters: any = {};
      Object.keys(values).map((key: any) => {
        const val = values[key];
        if (val) {
          filters[key] = encodeURIComponent(val);
        }
      });

      this.props.handleSearch(filters, true);
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleFormSearch} layout="inline">
        <FormItem>
          {getFieldDecorator('name')(<Input style={{ width: 260 }} placeholder="搜索Tag" />)}
        </FormItem>
        <FormItem>
          <div style={{ overflow: 'hidden' }}>
            <span style={{ marginBottom: 24 }}>
              <Button icon="search" type="primary" htmlType="submit">
                查询
              </Button>
              <Button icon="reset" style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
              <Button
                style={{ marginLeft: 8 }}
                icon="plus"
                type="primary"
                onClick={() => {
                  this.props.showModal();
                }}>
                新建
              </Button>
            </span>
          </div>
        </FormItem>
      </Form>
    );
  }
}
export default Form.create()(SearchForm);
